<template>
  <div v-loading="loading" class="rc-cont">
    <!-- <flexbox
      v-if="!isSeas && crmType!='customer'"
      class="rc-head"
      direction="row-reverse">
      <el-button
        class="xr-btn--orange rc-head-item"
        icon="el-icon-plus"
        type="primary"
        @click="createClick('plan')">新建回款计划</el-button>
    </flexbox>
    <el-table
      v-if="crmType!='customer'"
      :data="palnList"
      :height="tableHeight"
      stripe
      style="width: 100%;border: 1px solid #E6E6E6;">
      <el-table-column
        v-for="(item, index) in planFieldList"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        show-overflow-tooltip/>
      <el-table-column
        label="操作"
        fixed="right"
        width="100">
        <template slot-scope="scope">
          <flexbox justify="center">
            <el-button
              type="text"
              @click.native="handleFile('edit', scope)">编辑</el-button>
            <el-button
              type="text"
              @click.native="handleFile('delete', scope)">删除</el-button>
          </flexbox>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      v-if="crmType =='customer'"
      :data="repayList"
      :height="tableHeight"
      :cell-class-name="cellClassName"
      stripe
      style="width: 100%;border: 1px solid #E6E6E6;"
      @row-click="handleRowClick"
      >
      <el-table-column
        v-for="(item, index) in repayFieldList"
        :key="index"
        :prop="item.prop"
        :formatter="fieldFormatter"
        :label="item.label"
        show-overflow-tooltip/>
        <el-table-column
          v-if="crmType=='customer'"
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button v-if="scope.row.checkStatus == 5" @click="handleStatus(scope.row)" type="text" size="small">审核通过</el-button>
          </template>
        </el-table-column>
    </el-table> -->
    <flexbox class="rc-head" justify="space-between" align="end">
      <span class="color-02 size-14 font-bold">回款列表</span>
      <el-button
        v-if="showCreateBtn"
        class="xr-btn--orange rc-head-item"
        icon="el-icon-plus"
        type="primary"
        @click="createClick('money')"
        style="font-size: 14px"
        >新建回款</el-button
      >
    </flexbox>
    <el-table
      :data="list"
      :height="tableHeight"
      :cell-class-name="cellClassName"
      stripe
      style="width: 100%; border: 1px solid #e6e6e6"
      @row-click="handleRowClick"
    >
      <el-table-column
        v-for="(item, index) in fieldList"
        :key="index"
        :prop="item.prop"
        :formatter="fieldFormatter"
        :label="item.label"
        show-overflow-tooltip
      />
      <el-table-column label="状态" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          <span :class="getsStatusColor(scope.row.checkStatus)">
            {{ getStatusName(scope.row.checkStatus) }}</span
          >
        </template>
      </el-table-column>
    </el-table>
    <c-r-m-full-screen-detail
      :visible.sync="showFullDetail"
      :crm-type="showFullCrmType"
      :id="showFullId"
      @handle="detailHandle"
    />

    <c-r-m-all-create
      v-if="isCreate"
      :crm-type="createCrmType"
      :action="createActionInfo"
      @save-success="saveSuccess"
      @close="isCreate = false"
    />
  </div>
</template>

<script type="text/javascript">
import CRMAllCreate from "./CRMAllCreate";
import {
  crmCustomerQueryReceivablesAPI,
  crmCustomerQueryReceivablesPlanAPI,
} from "@/api/crm/customer";
import {
  crmCustomerVipQueryReceivablesAPI,
  crmCustomerVipQueryReceivablesPlanAPI,
} from "@/api/crm/vipStudents";
import {
  crmContractQueryReceivablesAPI,
  crmContractQueryReceivablesPlanAPI,
} from "@/api/crm/contract";
import {
  crmReceivablesPlanDeleteAPI,
  crmReceivablesUpdateRAPI,
} from "@/api/crm/receivables";
/** 注意  需要删除接口 */
import { objDeepCopy, getWkDateTime } from "@/utils";
import CheckStatusMixin from "@/mixins/CheckStatusMixin";
import { separator } from "@/filters/vueNumeralFilter/filters";
import { mapGetters } from "vuex";

export default {
  name: "RelativeReturnMoney", // 相关回款  可能再很多地方展示 放到学员管理目录下

  components: {
    CRMAllCreate,
    CRMFullScreenDetail: () => import("@/components/CRMFullScreenDetail"),
  },

  mixins: [CheckStatusMixin],

  props: {
    /** 模块ID */
    id: [String, Number],
    /** 没有值就是全部类型 有值就是当个类型 */
    crmType: {
      type: String,
      default: "",
    },
    /** 是公海 默认是学员 */
    isSeas: {
      type: Boolean,
      default: false,
    },
    /** 学员和 合同下 可新建 回款计划 */
    detail: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },

  data() {
    return {
      loading: false,
      list: [],
      fieldList: [],
      tableHeight: "400px",
      showFullDetail: false,
      showFullCrmType: "receivables",
      showFullId: "", // 查看全屏详情的 ID
      createCrmType: "receivables_plan", // 创建回款计划
      isCreate: false, // 新建回款回款
      palnList: [],
      planFieldList: [],
      createActionInfo: {}, // 新建回款计划的时候 在学员 合同下导入关联信息
      repayList: [],
      repayFieldList: [],
    };
  },

  inject: ["rootTabs"],

  computed: {
    ...mapGetters(["crm"]),
    showCreateBtn() {
      if (
        this.crmType != "vipStudents" &&
        this.crm &&
        this.crm["receivables"] &&
        this.crm["receivables"].save &&
        this.detail.contractCategory != "账单合同"
      ) {
        return true;
      }
      return false;
    },
  },

  watch: {
    id(val) {
      this.list = [];
      this.palnList = [];
      this.repayList = [];
      this.initData();
    },

    "rootTabs.currentName"(val) {
      if (val === "RelativeReturnMoney") {
        if (this.crmType == "customer") {
          this.getRepayList(false);
          this.getList(false);
        } else {
          // this.getPlanList(false);
          this.getList(false);
        }
      }
    },
  },

  mounted() {
    this.$bus.on('crm-return-list-update', this.getList)
    this.planFieldList = [
      { prop: "num", width: "200", label: "期数" },
      { prop: "customerName", width: "200", label: "学员名称" },
      { prop: "contractNum", width: "200", label: "合同编号" },
      { prop: "money", width: "200", label: "计划回款金额" },
      { prop: "returnDate", width: "200", label: "计划回款日期" },
      { prop: "returnType", width: "200", label: "计划回款方式" },
      { prop: "remind", width: "200", label: "提前几日提醒" },
      { prop: "remark", width: "200", label: "备注" },
    ];
    this.repayFieldList = [
      { prop: "receivablesNum", width: "200", label: "回款编号" },
      { prop: "contractName", width: "200", label: "合同名称" },
      { prop: "contractMoney", width: "200", label: "合同金额" },
      { prop: "dueMoney", width: "200", label: "待偿金额" },
      { prop: "returnType", width: "200", label: "付款方式" },
      { prop: "ownerUserName", width: "200", label: "负责人" },
      { prop: "checkStatus", width: "200", label: "状态" },
      { prop: "returnTime", width: "200", label: "回款日期" },
    ];
    this.fieldList = [
      { prop: "receivablesNum", width: "200", label: "回款编号" },
      { prop: "contractName", width: "200", label: "合同名称" },
      { prop: "contractMoney", width: "200", label: "合同金额" },
      { prop: "receivablesMoney", width: "200", label: "回款金额" },
      { prop: "collectionType", width: "200", label: "回款类型" },
      { prop: "ownerUserName", width: "200", label: "负责人" },
      // { prop: "checkStatus", width: "200", label: "状态" },
      { prop: "paymentTime", width: "200", label: "回款日期" },
    ];
    this.initData();
  },

  methods: {
    yzRepay(val) {
      if (!val) return;
      let str = val.split("|")[0];
      if (str == "全额贷款") {
        return true;
      } else {
        return false;
      }
    },
    initData() {
      if (this.crmType == "customer") {
        this.getRepayList();
        this.getList();
      } else {
        // this.getPlanList();
        this.getList();
      }
    },
    /**
     * 回款计划列表
     */
    getPlanList(loading = true) {
      this.loading = loading;
      const request = {
        customer: crmCustomerQueryReceivablesPlanAPI,
        contract: crmContractQueryReceivablesPlanAPI,
        vipStudents: crmCustomerVipQueryReceivablesPlanAPI,
      }[this.crmType];
      request(this.getParams(3))
        .then((res) => {
          this.loading = false;
          const list = res.data.list || [];
          list.forEach((item) => {
            item.returnDate = getWkDateTime(item.returnDate);
          });
          this.palnList = list;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    getRepayList(loading = true) {
      this.loading = loading;
      const request = {
        customer: crmCustomerQueryReceivablesAPI,
        contract: crmContractQueryReceivablesAPI,
        vipStudents: crmCustomerVipQueryReceivablesAPI,
      }[this.crmType];
      request(this.getParams(1))
        .then((res) => {
          this.loading = false;
          this.repayList = res.data.list;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 回款列表
     */
    getList(loading = true) {
      this.loading = loading;
      const request = {
        customer: crmCustomerQueryReceivablesAPI,
        contract: crmContractQueryReceivablesAPI,
        vipStudents: crmCustomerVipQueryReceivablesAPI,
      }[this.crmType];
      let params =
        this.crmType == "contract" ? this.getParams(3) : this.getParams(0);
      request(params)
        .then((res) => {
          this.loading = false;
          this.list = res.data.list;
        })
        .catch(() => {
          this.loading = false;
        });
    },

    /**
     * 获取上传参数
     */
    getParams(type) {
      if (type == 0) {
        return { customerId: this.id, pageType: 0, defaultGenerate: 0 };
      } else if (type == 1) {
        return { customerId: this.id, pageType: 0, defaultGenerate: 1 };
      } else if (type == 3) {
        return { contractId: this.id, pageType: 0 };
      }
      return {};
    },

    /**
     * 当某一行被点击时会触发该事件
     */
    handleRowClick(row, column, event) {
      if (column.property == "receivablesNum") {
        this.showFullId = row.receivablesId;
        this.showFullCrmType = "receivables";
        this.showFullDetail = true;
      }
    },
    handleCopy(row) {
      this.createClick("copy", row);
    },

    /**
     * 新建回款和回款计划
     */
    createClick(type, row) {
      this.createActionInfo = {
        type: "relative",
        crmType: this.crmType,
        data: row || {},
      };
      if (type == "money") {
        if (this.crmType === "contract") {
          this.createActionInfo.data["customer"] = objDeepCopy(this.detail);
          this.createActionInfo.data["contract"] = objDeepCopy(this.detail);
        } else if (
          this.crmType === "customer" ||
          this.crmType === "vipStudents"
        ) {
          this.createActionInfo.data["customer"] = this.detail;
        }
        this.createCrmType = "receivables";
        this.isCreate = true;
      } else if (type == "plan") {
        if (this.crmType === "contract") {
          this.createActionInfo.data["customer"] = objDeepCopy(this.detail);
          this.createActionInfo.data["contract"] = objDeepCopy(this.detail);
        } else if (
          this.crmType === "customer" ||
          this.crmType === "vipStudents"
        ) {
          this.createActionInfo.data["customer"] = this.detail;
        }
        this.createCrmType = "receivables_plan";
        this.isCreate = true;
      } else if (type == "copy") {
        this.createActionInfo.data["customer"] = this.detail;
        this.createActionInfo.data["contract"] = objDeepCopy(row);
        this.createActionInfo.data["payment_type"] = row.returnType;
        this.createActionInfo.data["threePartOrderNo"] = row.threePartOrderNo;
        this.createActionInfo.data["studentsCall"] = row.studentsCall;
        this.createActionInfo.data["teacherId"] = row.teacherId;
        console.log(this.createActionInfo);
        this.createCrmType = "receivables";
        this.isCreate = true;
        this.createActionInfo.type = "repay";
      }
    },

    /**
     * 新建成功
     */
    saveSuccess() {
      if (this.createCrmType == "receivables") {
        this.$bus.emit("crm-tab-num-update");
        // this.getRepayList();
        this.getList();
      } else {
        this.getPlanList();
      }
    },

    /**
     * 编辑操作
     */
    handleFile(type, item) {
      if (type == "edit") {
        this.createActionInfo = { type: "update", id: item.row.planId };
        this.createCrmType = "receivables_plan";
        this.isCreate = true;
      } else if (type == "delete") {
        this.$confirm("您确定要删除吗?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            crmReceivablesPlanDeleteAPI([item.row.planId])
              .then((res) => {
                this.palnList.splice(item.$index, 1);
                this.$message.success("删除成功");
              })
              .catch(() => {});
          })
          .catch(() => {});
      }
    },

    /**
     * 格式化字段
     */
    fieldFormatter(row, column) {
      // 如果需要格式化
      if (
        column.property == "contractMoney" ||
        column.property == "receivablesMoney"
      ) {
        return separator(row[column.property] || 0);
      }
      return row[column.property];
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === "receivablesNum") {
        return "can-visit--underline";
      } else {
        return "";
      }
    },

    /**
     * 详情操作
     */
    detailHandle(data) {
      if (data.type === "delete") {
        this.getList();
        this.$nextTick(() => {
          this.$bus.emit("crm-tab-num-update");
        });
      }
    },
    handleStatus(row) {
      console.log(row.receivablesId);
      crmReceivablesUpdateRAPI({}, row.receivablesId).then(() => {
        this.$message.success("审核通过");
        this.initData();
      });
    },
  },
  beforeDestroy() {
    this.$bus.off('crm-return-list-update')
  },
};
</script>
<style lang="scss" scoped>
@import "../styles/relativecrm.scss";
</style>
